<template>
  <div v-for="(item,n) in list" :key="n">
    <div class="f14 mb40">
        <img v-lazy="require(`@/assets/images/slide/0${n+1}.jpg`)" class="pic" />
    </div>
    <div class="flex flex-wrap">
        <div class="w50"><h2 class="pr20 pb20">{{item.name}}</h2></div>
        <div class="w50 f15 content pb10">
          <p>
            <span>{{item.mobel}}</span> <br>
            <span>{{item.email}}</span>
          </p>
          <p>
            <span>{{item.address}}</span>
          </p>
        </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref, computed, defineComponent } from 'vue'
import { useStore } from "vuex";

export default defineComponent({
  name: 'AItem',
  props:{
    list: {
      type: Array,
      default: () =>[
        {name:'西丽社区店',address:'深圳市南山区西丽社区',mobel:'+86 175xxxx5125',email:'xc@163.con'},
        {name:'上梅林店',address:'深圳市福田区上梅林朝阳路24号',mobel:'+86 175xxxx5125',email:'xc@163.con'},
        {name:'龙珠Copse店',address:'深圳市福田区龙珠大道i18号',mobel:'+86 175xxxx5125',email:'xc@163.con'},
      ]
    }
  },
  setup(){
    const img = require('@/assets/images/slide/02.jpg')

    return {
      img,
    }
  }
})
</script>
<style lang="less" scoped>
.border-top{
  border-top: 6px solid #fff;
  .padding-top(24px)
}
.w50{
  width: 50%;
  @media @max768{
    width: 100%;
  }
}
.pic{
  display: block;
  width: 100%;
}
.content p{
  .margin-bottom(30px);
  line-height: 1.5;
}
</style>